<template>
  <div class="wrap">
    <div class="content-list">
      <div ref="myTable" style="height: 100%; overflow: hidden; background: transparent">
        <table>
          <tr v-for="(item, index) in listData" :key="index">
            <td width="50px">{{ formatDict(item, { property: 'unitCode' }, item.unitCode) }}</td>
            <td>{{ item.planName }}</td>
            <td width="60px">{{ formatDict(item, { property: 'tikectType' }, item.tikectType) }}</td>
            <td width="40px">{{ item.workLeader }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import isepApp from '@/api/isep'

export default {
  name: 'IsepLeftTop',
  data() {
    return {
      listData: [],
      timer: {},
      dictData: {
        unitCode: [
          { value: '01', label: '#1机组' },
          { value: '02', label: '#2机组' },
          { value: '00', label: '全厂公用' }
        ],
        tikectType: [
          { value: '01', label: '电气一种票' },
          { value: '02', label: '电气二种票' },
          { value: '11', label: '热机一种票' },
          { value: '12', label: '热机二种票' },
          { value: '21', label: '热控一种票' },
          { value: '22', label: '热控二种票' }
        ]
      }
    }
  },
  mounted() {
    this.initLoadData()
    let speed = 60000
    const self = this
    let theNowTime = function () {
      self.initLoadData()
    }
    setInterval(theNowTime, speed)
    this.createScroll()
  },
  unmounted() {
    this.clearScroll()
  },
  methods: {
    rowClass({ row }) {
      return row.inAndOutType === 1 ? 'color: greenyellow' : 'color: greenyellow'
    },
    clearScroll() {
      clearInterval(this.timer)
      this.timer = null
    },
    createScroll() {
      this.clearScroll()
      // 拿到可以滚动的元素
      const tableWrapper = this.$refs.myTable

      this.timer = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop + 1 >= tableWrapper.scrollHeight) {
          tableWrapper.scrollTop = 0
        }
      }, 50)
    },
    subString2(str) {
      str = str + '000'
      return str.substring(11, 19)
    },
    initLoadData() {
      isepApp.getPdtaskplanList({ validSta: '00' }).then((res) => {
        if (res.code === 200) {
          this.listData = res.data
        }
      })
    },
    formatDict(row, column, cellValue) {
      const dictList = this.dictData[column.property]
      let label = cellValue
      if (dictList) {
        dictList.forEach((element) => {
          if (element.value == cellValue) {
            label = element.label
          }
        })
      }
      return label
    }
  }
}
</script>

<style scoped lang="scss">
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: greenyellow;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.wrap {
  width: 100%;
  height: 100%;
  padding: 0;
}

.moudle-title {
  color: #50e9ff;
  font-size: 16px;
  text-align: center;
}

.content-list {
  padding: 0 5px;
  height: calc(100% - 10px);
  color: #147dcf;
  font-size: 12px;

  .content-item {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
  }
}

.temper-scroll {
  height: 230px;
  width: 380px;
  margin: 30px auto;
  overflow: hidden;
  .scroll-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 15px;
    color: #147dcf;
  }
}

.incss {
  color: greenyellow;
}

.outcss {
  color: #147dcf;
}

table,
table td {
  border-collapse: collapse;
  border: 1px solid rgb(202, 224, 255, 0.2);
}
table {
  width: 100%;
  margin-top: 5px;
}
table td {
  padding: 2px 3px;
  font-size: 10px;
  font-weight: normal;
  text-align: center;
  word-break: break-all;
  color: #dcdfe6;
}
</style>
